<!doctype html>
<html lang="en">
<head>
	<title>ScatterChart - Overview</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="description" content="%description%" />
	<meta name="keywords" content="" />
	<meta name="author" content="ComponentOne" />
	
	<link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
	
	<script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
	<script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
	<script src="../../external/globalize.min.js" type="text/javascript"></script>
	<script src="../../external/raphael-min.js" type="text/javascript"></script>
    <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijtouchutil.js"></script>
	<script src="../../wijmo/jquery.wijmo.raphael.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijchartcore.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijscatterchart.js" type="text/javascript"></script>
	<script id="scriptInit" type="text/javascript">
		$(document).ready(function () {

			$("#wijscatterchartDefault").wijscatterchart({
				header: {
					text: "Height Versus Weight of 72 Individuals by Gender"
				},
				indicator: {
					visible: true
				},
				axis: {
					y: {
						text: "Weight (kg)",
						labels: {
							style: {
								fill: "#7f7f7f",
								"font-size": 11
							}
						},
						gridMajor: {
							style: { stroke: "#353539", "stroke-dasharray": "- " }
						},
						tickMajor: { position: "outside", style: { stroke: "#7f7f7f"} },
						tickMinor: { position: "outside", style: { stroke: "#7f7f7f"} }
					},
					x: {
						text: "Height (cm)",
						labels: {
							style: {
								fill: "#7f7f7f",
								"font-size": 11,
								rotation: -45
							}
						},
						tickMajor: { position: "outside", style: { stroke: "#7f7f7f"} }
					}
				},
				showChartLabels: false,
				hint: {
					content: function () {
						var str = "";
						str += "x: " + this[0].x + "cm\n";
						$.each(this, function (i, data) {
							str += "y: " + data.y + "kg\n";
						})
						return str;
					},
					contentStyle: {
						"font-size": 10
					},
					offsetY: -10
				},
				legend: {
					visible: true
				},
				seriesList: [
					{
						label: "Female",
						legendEntry: true,
						data: {
							x: [161.4, 169.0, 166.2, 159.4, 162.5, 159.0, 162.8, 159.0, 179.8, 162.9, 161.0, 151.1, 168.2, 168.9, 173.2,
								174.0, 162.6, 174.0, 162.6, 161.3, 156.2, 149.9, 169.5, 160.0, 175.3, 169.5, 160.0, 172.7, 162.6, 157.5,
								176.5, 164.4, 160.7, 174.0, 163.8],
							y: [63.4, 58.2, 58.6, 45.7, 52.2, 48.6, 57.8, 55.6, 66.8, 59.4, 53.6, 73.2, 53.4, 69.0, 58.4,
								73.6, 61.4, 55.5, 63.6, 60.9, 60.0, 46.8, 57.3, 64.1, 63.6, 67.3, 75.5, 68.2, 61.4, 76.8,
								71.8, 55.5, 48.6, 66.4, 67.3]
						},
						visible: true,
						markerType: "circle"
					}, {
						label: "Male",
						legendEntry: true,
						data: {
							x: [175.0, 174.0, 165.1, 177.0, 192.0, 176.5, 169.4, 182.1, 179.8, 175.3, 184.9, 177.3, 167.4, 178.1, 168.9,
								174.0, 167.6, 170.2, 167.6, 188.0, 174.0, 176.5, 180.3, 167.6, 188.0, 180.3, 167.6, 183.0, 183.0, 179.1,
								170.2, 177.8, 179.1, 190.5, 177.8, 180.3, 180.3
							],
							y: [70.2, 73.4, 70.5, 68.9, 102.3, 68.4, 65.9, 75.7, 84.5, 87.7, 86.4, 73.2, 53.9, 72.0, 55.5,
								70.9, 64.5, 77.3, 72.3, 87.3, 80.0, 82.3, 73.6, 74.1, 85.9, 73.2, 76.3, 65.9, 90.9, 89.1,
								62.3, 82.7, 79.1, 98.2, 84.1, 83.2, 83.2
							]
						},
						visible: true,
						markerType: "diamond"
					}
				],
				seriesStyles: [{
					fill: "#afe500",
					stroke: "#afe500"
				}, {
					fill: "#ff9900",
					stroke: "#ff9900"
				}
				]
			});
		});

		function redraw() {
			$("#wijscatterchartDefault").wijscatterchart("redraw");
		}
	</script>
</head>
<body class="demo-single">
	<div class="container">
		<div class="header">
			<h2>
				Overview</h2>
		</div>
		<div class="main demo">
			<!-- Begin demo markup -->
			<div id="wijscatterchartDefault" class="ui-widget ui-widget-content ui-corner-all" style="width: 756px; height: 475px;">
			</div>
			<!-- End demo markup -->
			<div class="demo-options">
				<!-- Begin options markup -->
				<input type="button" value="redraw" onclick="redraw()" />
				<!-- End options markup -->
			</div>
		</div>
		<div class="footer demo-description">
			<p>The wijscatterchart widget allows you to create customized scatter charts. 
				The samples in this section highlight some of the unique features of the widget, and they will help you get started with wijscatterchart widget.</p>
			<p>
				The source in this sample will show you how to add a header to the chart; 
				how to format the axes; and how to populate the chart with numerical x and y data.</p>
		</div>
	</div>
</body>
</html>
